<lv-form [formGroup]="formGroup" lvLayout="vertical" [lvLabelColon]="false">
  <lv-form-item>
    <lv-form-label lvRequired>Name</lv-form-label>
    <lv-form-control lvHelp="This is helper text" [lvErrorTip]="{ required: 'The value shouldn’t be empty', nameExist: 'name already exists' }">
      <input lv-input type="text" formControlName="name" />
    </lv-form-control>
  </lv-form-item>
  <lv-form-item>
    <lv-form-label lvRequired>Contact</lv-form-label>
    <lv-form-control lvErrorTip="no contact selected">
      <lv-select formControlName="contact" [lvOptions]="data" lvValueKey="label" (ngModelChange)="onContactChange($event)"></lv-select>
    </lv-form-control>
  </lv-form-item>
  <lv-form-item *ngIf="formGroup.contains('email')">
    <lv-form-label>
      Email
      <i lv-icon="icon-help" lv-tooltip="only support mailbox" style="margin-left: 0.04rem"></i>
    </lv-form-label>
    <lv-form-control lvErrorTip="email format error">
      <input lv-input formControlName="email" />
    </lv-form-control>
  </lv-form-item>
  <lv-form-item *ngIf="formGroup.contains('phone')">
    <lv-form-label>Phone</lv-form-label>
    <lv-form-control lvErrorTip="phone format error">
      <input lv-input formControlName="phone" />
    </lv-form-control>
  </lv-form-item>
  <lv-form-item>
    <lv-form-label>
      Description
      <span style="color: #808080">(Optional)</span>
    </lv-form-label>
    <lv-form-control>
      <textarea lv-input rows="4"></textarea>
    </lv-form-control>
  </lv-form-item>
  <div style="margin-top: 20px">
    <button lv-button [lvLoading]="loading" (click)="register()" class="aui-gutter-row-md">Register</button>
    <button lv-button (click)="reset()">Reset</button>
  </div>
</lv-form>
